<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/index.js"
import { checkblank, checkprice } from "../util/util.js";

const tableData = ref([]);
const checkObj = ref({
    page: 1,
    size: 10,
})
const total = ref({});

const addWinVisible = ref(false);
const addObj = ref({});

const editWinVisible = ref(false);
const editObj = ref({});
var editIndext = -1;

const detailVisible=ref(false);
const detailObj=ref({});
const detailData=ref([])

const formRef = ref({});


//显示数据
onMounted(async function () {
    checkData();
});

const checkData = async function (val) {
    console.log(checkObj.value);
    if (typeof val == "number") {
        checkObj.value.page = val;
    }
    let result = await api.get("/api/tickets", checkObj.value);

    //更新表格中的数据
    tableData.value = result.data.res;
    total.value = result.data.count;
};

//检查表单填写的金额
const rules = reactive({
    price: [{ validator: checkprice, trigger: "blur" }],
    name: [{ validator: checkblank, trigger: "blur" }],
})

//添加数据
//显示窗口
const addWin = function () {
    addWinVisible.value = true;
    addObj.value = {};
}
//保存添加的数据
const addSave = async function () {
    formRef.value.validate(
        async (valid) => {
            if (valid) {
                let result = await api.postjson("/api/tickets", addObj.value);
                tableData.value.unshift(result.data);
                addWinVisible.value = false;
                ElMessage({
                    type: 'success',
                    message: '添加成功',
                });
            } else {
                console.log("添加失败");
            }
        }
    )
}

//删除数据
const del = function (index, row) {
    ElMessageBox.confirm(
        "确认删除？",
        "注意",
        {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }).then(async function () {
            let result = await api.del("/api/tickets", row.id);
            if (result.code == 200) {
                tableData.value.splice(index, 1);
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            } else {
                ElMessage({
                    type: 'info',
                    message: result.message
                })
            }
        }).catch(function () {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        });
}

//修改数据
const edit = function (index, row) {
    //记录修改数据的下标
    editIndext = index;
    //绑定要修改的数据
    editObj.value.id = row.id;
    editObj.value.name = row.name;
    editObj.value.price=row.price;
    //打开对话框
    editWinVisible.value = true;
}
const editSave = async function () {
    formRef.value.validate(
        async (valid) => {
            if (valid) {
                let result = await api.putjson("/api/tickets", editObj.value);
                console.log(result.data);
                tableData.value[editIndext] = result.data;
                editWinVisible.value = false;
                ElMessage({
                    type: 'success',
                    message: '修改成功',
                });
            } else {
                console.log("修改失败");
            }
        }
    )
}

const detail=async function(index, row){
    detailObj.value.id=row.id;
    let result=await api.get("/api/tickets/detail",detailObj.value);
    detailData.value=result.data;
    detailVisible.value=true;
}
</script>

<template>
    <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="6"><el-input v-model="checkObj.name" style="width: 100%" placeholder="名称" /></el-col>
        <el-col :span="4"><el-button type="primary" @click="checkData" style="width: 100%;">
                <el-icon style="vertical-align: middle">
                    <Search />
                </el-icon>
                <span style="vertical-align: middle"> 搜索 </span>
            </el-button></el-col>
        <el-col :span="4" :offset="10"><el-button type="primary" @click="addWin" style="width: 100%;">
                <el-icon>
                    <CirclePlusFilled />
                </el-icon>
                <span style="vertical-align: middle"> 新增 </span>
            </el-button></el-col>
    </el-row>
    <div style="height: 500px; overflow: auto; margin-bottom: 20px;
        border-radius: 10px; /* 圆角半径 */
        margin-top: 20px; /* 上方间距 */
        padding: 10px; /* 内间距，确保内容不会紧贴边缘 */
        background-color: #fff; /* 可选：设置背景颜色 */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 可选：添加阴影以提高视觉效果 */">
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称" min-width="120" />
        <el-table-column prop="price" label="价格" min-width="120" />
        <el-table-column fixed="right" label="操作" min-width="120" >
            <template #default="scope">
            <el-button-group>
                <el-button type="primary" @click="detail(scope.$index, scope.row)">
                    <el-icon><List /></el-icon>
                    <span style="vertical-align: middle"> 可游玩项目 </span>
                </el-button>
                <el-button type="primary" @click="edit(scope.$index, scope.row)">
                    <el-icon>
                        <Edit />
                    </el-icon>
                    <span style="vertical-align: middle"> 编辑 </span>
                </el-button>
                <el-button type="danger" @click="del(scope.$index, scope.row)">
                    <el-icon>
                        <Delete />
                    </el-icon>
                </el-button>
            </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="checkData"
      :page-size="checkObj.size"
      style="position: fixed; left: 50%; transform: translateX(-50%); bottom: 100px; z-index: 1000;"
    />

    <!--start 新增信息的弹出框 -->
    <el-dialog v-model="addWinVisible" title="添加票种" width="500">
        <el-form :model="addObj" label-width="80px" :rules="rules" ref="formRef">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="addObj.name" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="价格" prop="price">
                        <el-input v-model="addObj.price" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addWinVisible = false">取消</el-button>
                <el-button type="primary" @click="addSave">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- end -->

    <!--start 修改信息的弹出框 -->
    <el-dialog v-model="editWinVisible" title="修改票种" width="500">
        <el-form :model="editObj" label-width="80px" :rules="rules" ref="formRef">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="editObj.name" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="价格" prop="price">
                        <el-input v-model="editObj.price" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editWinVisible = false">取消</el-button>
                <el-button type="primary" @click="editSave">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- end -->

    <!--start查看详情信息弹出框-->
    <el-dialog v-model="detailVisible" title="可游玩项目" width="400">
        <el-table :data="detailData" style="width: 100%">
        <el-table-column label="名称" min-width="120">
        <template #default="scope">
            {{ scope.row }}
        </template>
    </el-table-column>
        </el-table>
    </el-dialog>
    <!---->

</template>

<style></style>
